<template>
  <div class="video-list">
    <div v-for="(video, index) in videoList" :key="index" class="video-item">
      <!-- 视频播放 -->
      <video :src="video.commodityVideo" controls></video>
      <!-- 商品详情按钮 -->
      <el-button  type="success" plain size="small" @click="navigateToDetail(video.commodityId)">查看详情</el-button>
    </div>
  </div>
</template>

<script setup>
import request from '@/utils/request.ts'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const videoList = ref([])

// 获取视频列表
const fetchVideoList = async () => {
  try {
    const res = await request.get('/api/commodity/get/video')
    videoList.value = res.data
  } catch (error) {
    console.error('获取视频列表失败:', error)
  }
}

// 跳转到商品详情页面
const router = useRouter()
const navigateToDetail = (commodityId) => {
  router.push(`/user/commodity/detail/${commodityId}`)
}

// 页面加载时获取视频列表
onMounted(() => {
  fetchVideoList()
})

</script>

<style scoped>
.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.video-item {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
}
video {
  width: 100%;
  height: auto;
}

</style>
